<template>
    <div class="about">
      <el-form :model="form" label-width="80px">
      <el-form-item :label="typeParams.verifyType">
        <el-input v-model="form.contact" />
      </el-form-item>
      <el-form-item label="verifycode" >
        <el-input v-model="form.verifyCode" class="verify_code_input"/>
        <el-button class="button" type="primary" :disabled="state.canGet" @click="getCode">{{state.btnText}}</el-button>
      </el-form-item>
    </el-form>
    <Login :contact="form.contact" :verifyCode="form.verifyCode" :verifyId="form.verifyId" :verifyType="typeParams.verifyType"></Login>
    </div>
  </template>
  
<script lang="ts" setup>
  import { reactive } from 'vue';
  import Login from '../components/Login.vue';
  import { post } from '../utils/request'
  const createUuidApi = process.env.VUE_APP_CREATE_UUID_API
  const typeParams = defineProps(
    {
    verifyType: {
        type: String
    }
    }
  )

  // const instance = inject('$instance')
  const form = reactive({
    contact: '',
    verifyCode: '',
    message: {},
    verifyId: ""
  })
  
  const state = reactive({
    btnText: '获取验证码',
    canGet: false,
    time: 0,
    timer: 0,
  })
  
  const timer1 = () => {
    if (state.time > 0) {
      state.time--;
      state.btnText = state.time + "s后重新获取"
      state.timer = setTimeout(timer1, 1000)
    }else{
      state.time = 0;
      state.btnText = '获取验证码';
      state.canGet = false;
      clearTimeout(state.timer)
    }
  }
  
  const getCode = () => {
    if (typeParams.verifyType == 'Email'){
      var Reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
    }else{
      var Reg = /^1[3|4|5|7|8][0-9]{9}/;
    }
    
    if (!Reg.test(form.contact)){
      console.log("出错了" + form.contact)
      form.message = {
        message: "请检查邮箱地址重试"
      }
      return;
    }
    post(createUuidApi, {
      userName: form.contact,
      verifyType: typeParams.verifyType?.toLowerCase(),
      contact: form.contact,
    }).then(
      respnose => {
        console.log(respnose)
        form.verifyId = respnose.data.verifyId
      }
    )
    state.canGet = true;
    state.time = 60;
    timer1();
  }
  
</script>

<style scoped>
.about {
    text-align: center;
    }
.verify_code_input {
    width: 181px;
    }
.button {
    background-color: var(--color-green);
    border-color: var(--color-green);
    }
</style>